/**
 * 图片放大镜
 * Author : Postbird
 * Website: http://www.ptbird.cn
 * License: MIT
 */
var PostbirdImgGlass = {
    /**
     * 初始化操作    
     * domSelector  - dom选择器           默认 img 
     * width        - 放大后图片宽度       默认 auto
     * height       - 放大后图片高度       默认 auto
     * boxClassName - 放大镜的容器的class  默认 postbird-img-glass-box
     * boxBgColor   - 放大镜容器的背景色   默认  rgba(0,0,0,0.8)
     * animation    - 是否开启CSS3动画     默认 false IE10+ 才有效
     * myDocument	- 在指定某层窗体展示图片放大 默认 document 当前页面,可以传入window.parent....
     */
    init: function (objParam) {
        this.domSelector = objParam.domSelector || "img";
        this.width = objParam.width || "auto";
        this.height = objParam.height || "auto";
        this.boxClassName = objParam.boxClassName || 'postbird-img-glass-box';
        this.boxBgColor = objParam.bgColor || 'rgba(0,0,0,0.8)';
        this.animation = objParam.animation || false;
        this.startGlass();
        //杨传龙添加,在指定某层页面展示图片放大
        this.myDocument=objParam.myDocument.document|| document;
        
        this.box = this.initImageClassContainer();
        //this.moveFn(this.box)
    },
    /**
     *  创建放大镜容器,并进行初始化参数和事件绑定 (在init中调用)
     *  返回创建的div
     *  包括一个 div 和 img
     */
    initImageClassContainer: function () {
        var _this = this,
            img = document.createElement('img');
        var eventName = "onmousewheel" || 'DOMMouseScroll'
        //img.setAttribute('DOMMouseScroll', "javascript:var obj=this;var zoom = parseInt(obj.style.zoom,10)||100;zoom += event.wheelDelta / 12;if(zoom > 0 )obj.style.zoom=zoom+'%';return false;");
        /*img.onmousewheel=function(event){
        	var obj=this;
        	var zoom = parseInt(obj.style.zoom,10)||100;
        	zoom += event.wheelDelta / 12;
        	if(zoom > 0 ){
        		obj.style.zoom=zoom+'%'
        	};
        	return false;
        }*/
        if(document.addEventListener){
        	img.addEventListener('DOMMouseScroll',function(event){
            	var obj=this;
            	var zoom = parseInt(obj.style.zoom,10)||100;
            	zoom += event.detail / 0.3;
            	if(event.detail > 0 ){
            		obj.style.width = (obj.offsetWidth)*0.8 +"px";
            		obj.style.height = (obj.offsetHeight)*0.8 +"px";
            	}else{
            		//obj.style.zoom=zoom+'%';
            		obj.style.width = (obj.offsetWidth)*1.2 +"px";
            		obj.style.height = (obj.offsetHeight)*1.2 +"px";
            		//console.log(zoom);
            	}
            	
            	return false;
            });
        }
    	img.onmousewheel=function(event){
        	var obj=this;
        	var zoom = parseInt(obj.style.zoom,10)||100;
        	zoom += event.wheelDelta / 12;
        	if(zoom > 0 ){
        		obj.style.zoom=zoom+'%'
        	};
        	return false;
        };
        img.ondragstart=function (){return false;}
    	var parent=null;
        img.onmousedown=function(e){
        	var mFleg=0;
        	var fleg=true;
        	 parent=this.parentNode;
        	var e = e || window.event,
        		sX = e.clientX,
        		sY = e.clientY,
        		imgsL = this.style.marginLeft;
        		imgsL=imgsL.substring(0,imgsL.length-2);
        		imgsT = this.style.marginTop;
        		imgsT=imgsT.substring(0,imgsT.length-2);
        		imgsT=imgsT?imgsT:"0";
        		imgsL=imgsL?imgsL:"0";
        		console.log(imgsL,imgsT);
    		parent.onmousemove = function (e){
	    		fleg=false;
	    		var e = e || window.event,
	    		mX = e.clientX,
	    		mY = e.clientY,
	    		chaX = mX - sX+parseInt(imgsL),
	    		chaY = mY - sY+parseInt(imgsT);
	    		mFleg = chaX ;
	    		img.style.marginLeft=chaX+"px";
	    		img.style.marginTop=chaY+"px";
        	}
    		parent.onmouseup = function (e){
    	      	  parent.onmousemove =null;
    	      	  if(fleg){
    	            _this.hideImageGlass();
    	            img.style.marginLeft=0;
    	            img.style.marginTop=0;
    	            img.style.width="auto";
    	            img.style.height="auto";
    	            img.style.zoom=0;
    	          }
    	  	}
        };
        
        img.style.width = _this.width;
        img.style.height = _this.height;
        var box = document.createElement("div");
        box.style = _this.boxStyle;
        box.className = _this.boxClassName;
        box.appendChild(img);
        box.onclick = function () {
        	//this.onmousemove =null;
            //_this.hideImageGlass();
        };
        _this.myDocument.body.insertBefore(box,_this.myDocument.body.childNodes[0]);
        this.initCssClass();
        return box;
    },
    /**
     * 开启放大镜 (在init中调用)
     * 使用 querySelectorAll 进行dom查找
     * 使用 addEventListener 进行事件绑定（因此需要IE9+）
     */
    startGlass: function () {
    	//杨传龙修改,改为jquery选择器,js的选择器 id名 和类型不可以以数字开头
        //var domList = document.querySelectorAll(this.domSelector);
    	var domList = $(this.domSelector);
        var _this = this;
        for (var i = 0, len = domList.length; i < len; i++) {
            domList[i].style.cursor = 'zoom-in';
            domList[i].addEventListener('click', function (event) {
                var target = event.target || event.srcElement;
                //ycl修改，src改为imgUrl,为了自定义放大图片和元img图片不是同一个图片
                _this.showImageGlass(target.getAttribute('imgUrl'));
            }, false);
        }
    },
    /**
     * 显示放大镜
     */
    showImageGlass: function (src) {
        this.box.childNodes[0].src = src;
        this.box.style.display = 'block';
        if (this.animation) {
            this.addCssAnimation();
        }
    },
    /**
     * 隐藏放大镜
     */
    hideImageGlass: function () {
        this.box.style.display = 'none';
        if (this.animation) {
            this.removeCssAnimation();
        }
    },
    /**
     * 显示放大镜后 增加动画 class
     */
    addCssAnimation: function () {
        this.box.className = this.box.className + ' postbird-img-glass-box-move';
    },
    /**
     * 隐藏放大镜后 移除动画 class
     */
    removeCssAnimation: function () {
        this.box.className = this.box.className.replace(' postbird-img-glass-box-move', '');
    },
    /**
     * 向head中写入style
     * 包含基本的css和动画css
     */
    initCssClass: function () {
        var style = document.createElement('style');
        var styleContent = '.' + this.boxClassName + '{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;cursor:zoom-out;background-color:' + this.boxBgColor + ';display:none;text-align:center;overflow:hidden;z-index:19891027;}';
        styleContent += '.' + this.boxClassName + ' img {position:relative;top:50%;transform:translateY(-50%);}';//max-width:90%;max-height:80%;
        styleContent += '.postbird-img-glass-box-move{animation:postbird-img-glass .5s;-webkit-animation:postbird-img-glass .5s;-moz-animation:postbird-img-glass .5s;-o-animation:postbird-img-glass .5s;animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}@-moz-keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}@-webkit-keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}@-o-keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}@keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}';
        style.innerHTML = styleContent;
        //杨传龙添加,在指定某层页面为图片添加放大样式
        this.myDocument.head.appendChild(style);
    }
};

